<template>
	<div class="layout">
		<div id="searchMsgDiv">
			<div style="display: flex; justify-content: center">
				<Breadcrumb class="breadcrumb" :crumbs="crumbs" :color="'#a0b6cd'" :chooseColor="'#FFFFFF'"></Breadcrumb>
			</div>
			<div id="searchMsg">
				<div id="searchMsgTitle">政策搜索结果</div>
				<div id="searchResultMsg">{{'当前搜索关键词：“' + wd + '”，共为您搜索到' + total + '条相关信息'}}</div>
			</div>
		</div>
    <ContainerTitle :text="$route.query.typeLabel" class="title"></ContainerTitle>
		<!-- <div id="searchTitleDiv">
			<div id="searchTitle">{{$route.query.typeLabel}}</div>
		</div> -->
		<div class="policyList">
			<PolicyFrameSearch class="policy" v-for="searchResult in searchResults" :policy="searchResult" :isSearch="true" :wd="wd" :key="searchResult.id"></PolicyFrameSearch>
			<div v-if="total == 0">
				<span>{{'查无包含“'+ wd + '”关键字的相关政策'}}</span>
			</div>
		</div>
		<div id="pageDiv">
			<div id="policyPagination" v-if="total > 0">
				<el-pagination
						@size-change="handleSizeChange"
						@current-change="handleCurrentChange"
						:current-page="pageNum" background
						:page-sizes="[10, 20, 30, 50]"
						:page-size="pageSize"
						layout="total, sizes, prev, pager, next, jumper"
						:total="total">
				</el-pagination>
			</div>
		</div>
	</div>
</template>

<script>
	import PolicyFrameSearch from './components/policyFrameSearch'
	import Breadcrumb from '@/components/breadcrumb'

	import config from '@/utils/config.js'
	import {request} from '@/utils/request.js'
  import { getPolicySearch } from "@/common/api/policy.js";

	export default {
		name: "policySearch",
		components: { PolicyFrameSearch, Breadcrumb},
		data() {
			return {
				wd: '',
				type: null,
				pageNum: 1,
				pageSize: 10,
				total: 0,
				searchResults: [],
				crumbs: [{
					label: '政策服务',
					value: 'policy'
				}, {
					label: '政策搜索结果',
					value: 'policySearch',
					choose: true
				}]
			}
		},
		methods: {
			/**
			 * 改变页面大小事件
			 */
			handleSizeChange: function(e) {
				let ns = this
				ns.pageSize = e
				ns.getSearchResult()
			},
			/**
			 * 换页事件
			 */
			handleCurrentChange: function(e) {
				let ns = this
				ns.pageNum = e
				ns.getSearchResult()
			},
			/**
			 * 设置搜索信息
			 */
			setSearchMsg: function () {
				let ns = this
				ns.wd = ns.$route.query.wd
				ns.type = ns.$route.query.type
				ns.getSearchResult()
			},
			/**
			 *
			 */
			async getSearchResult() {
				let ns = this
				let data = {
					query: ns.$route.query.wd,
					type: ns.$route.query.type,
					pageNum: ns.pageNum,
					pageSize: ns.pageSize,
					entrance: 1,
					sort:2
				}
        let res = await getPolicySearch(data)
        ns.total = res.total
        ns.searchResults = res.rows
        console.log("res.rows",res.rows)
        for(let i = 0; i < ns.searchResults.length; i++) {
          ns.searchResults[i].name = ns.searchResults[i].name.replace(/<[^<>]+>/g,"");
          ns.searchResults[i].description = ns.searchResults[i].description.replace(/<[^<>]+>/g,"");
        }
      }
		},
		mounted() {
			let ns = this
			ns.setSearchMsg()
		},
		activated() {
			let ns = this
			ns.setSearchMsg()
		}
	}
</script>

<style lang="scss" scoped>
  .title{
    width: $main-width ;
    margin: 20px auto !important;
  }
	.breadcrumb {
		width: 1200px;
		margin-bottom: 30px;
	}

	#searchMsgDiv {
		width: 100%;
		background-image: url("~@/assets/image/policySearch/searchBg.png");
		background-repeat: no-repeat;
		height: 169px;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		margin-bottom: 30px;
	}

	#searchMsgDiv #searchMsg {
		width: 1200px;
		text-align: left;
		color: #FFFFFF;
	}

	#searchMsgDiv #searchMsg #searchMsgTitle {
		font-size: 25px;
		margin-bottom: 10px;
	}

	#searchMsgDiv #searchMsg #searchResultMsg {
		font-size: 15px;
	}

	#searchTitleDiv {
		color: #045db9;
		display: flex;
		justify-content: center;
	}

	#searchTitleDiv #searchTitle {
		width: 1200px;
		text-align: left;
		padding: 10px;
		font-size: 20px;
		font-weight: bold;
		margin-bottom: 20px;
		border-bottom: 2px solid #045db9;
	}

	.policyList .policy {
		width: 1200px;
		margin: 0 auto;
		margin-bottom: 20px;
		border-bottom: 1px solid #eeeeee;
	}

	#pageDiv {
		display: flex;
		justify-content: center;
	}

	#pageDiv #policyPagination {
		margin: 30px 0;
		width: 1200px;
		text-align: right;
	}

	.layout {
		min-height: 100vh;
		position: relative;
		padding-bottom: 150px;
		box-sizing: border-box;
	}

	.footer {
		position: absolute;
		bottom: 0;
		width: 100%;
	}
</style>
